﻿<%@page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@page import="java.text.SimpleDateFormat,java.util.Calendar"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
	Calendar cal = Calendar.getInstance();
	Calendar cal2 = Calendar.getInstance();
	cal.set(Calendar.DAY_OF_MONTH,31);
	cal2.set(Calendar.DAY_OF_MONTH,1);
	SimpleDateFormat format = new SimpleDateFormat("yyyy-MM-dd");
	String today = format.format(cal.getTime());
	String oneday = format.format(cal2.getTime());
%>
<!DOCTYPE HTML>
<html>
	<head>
		<base href="<%=basePath%>">
		<META http-equiv=Content-Type content="text/html; charset=utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta name="renderer" content="webkit|ie-comp|ie-stand">
		<meta http-equiv="Cache-Control" content="no-siteapp" />
		<link type="text/css" rel="stylesheet" href="include/css/welcome.css" />
		<link type="text/css" rel="stylesheet" href="include/css/css.css" />
		<link type="text/css" rel="stylesheet" href="include/css/bootstrap.css" />
		<link type="text/css" rel="stylesheet" href="include/css/bootstrap-datetimepicker.min.css" />
		<link rel="stylesheet" href="include/jqgrid/css/ui.jqgrid.css" type="text/css"/>
		<link type="text/css" rel="stylesheet" href="include/iconFont/1.0.8/iconfont.css"/ >
		<link rel="stylesheet" href="include/css/H-ui.css" type="text/css"/>
		<link rel="stylesheet" href="include/icheck/icheck.css" type="text/css"/>
		<script type="text/javascript" src="include/js/jquery-1.8.3.js"></script>
		<script type="text/javascript" src="include/jqgrid/js/jquery.jqGrid.src.js"></script>
		<script type="text/javascript" src="include/jqgrid/js/i18n/grid.locale-cn.js"></script>
		<script type="text/javascript" src="include/js/bootstrap.min.js"></script>
		<script type="text/javascript" src="include/js/bootstrap-datetimepicker.js"></script>
		<script type="text/javascript" src="include/js/locales/bootstrap-datetimepicker.zh-CN.js"></script>
		<script type="text/javascript" src="include/layer/layer.js"></script>
	 	<link rel="stylesheet" href="include/jqgrid/css/css/gray1/jquery-ui.css" type="text/css"></link></head>
	<script type="text/javascript">
	
		
		window.onload=function(){
			
			$('.form_datetime').datetimepicker({
		        format: 'yyyy-mm-dd',
		        language: 'zh-CN',
		        pickDate: false,
		        pickTime: false,
		        hourStep: 1,
		        minuteStep: 15,
		        secondStep: 30,
		        autoclose: true,
		        pickerPosition:'bottom-left',
		        inputMask: true,
		        startView: 'year',
		        minView:'month'
		    });
			
			getCustomers();
			getSetupType();
			getSetupStates();
			getProducts();
			getUserInit();
			
		}
		
		function getSetupType()
		{
			var ddl = $("#setuptype");
            $.ajax({
				type: "POST",
				url: "JqueryAction/getSetupTypes.action",
				dataType: "json",
				async:false,
				cache:false, 
				success: function(datas)
				{
					for(var i=0;i<datas.length;i++)
					{
						ddl.append("<option value="+datas[i].id+">"+datas[i].repairName+"</option>");
					}
				}
			});
		}
		
		function getCustomers()
		{
			var ddl = $("#customer");
            $.ajax({
				type: "POST",
				url: "JqueryAction/getCustomers.action",
				dataType: "json",
				async:false,
				cache:false, 
				success: function(datas)
				{
					for(var i=0;i<datas.length;i++)
					{
						ddl.append("<option value="+datas[i].customerType+">"+datas[i].customerName+"</option>");
					}
				}
			});
		}
		
		function getSetupStates()
		{
			var ddl = $("#setupstate");
            $.ajax({
				type: "POST",
				data:{"statusType":"SETUPTYPE"},
				url: "JqueryAction/getSetupState.action",
				dataType: "json",
				async:false,
				cache:false, 
				success: function(datas)
				{
            		document.getElementById("classify").options.length=1;
					for(var i=0;i<datas.length;i++)
					{
						ddl.append("<option value="+datas[i].statusValue+">"+datas[i].statusName+"</option>");
					}
				}
			});
		}
		
		function getProducts()
		{
			var ccid = $("#customer")[0].value;
			var ddl = $("#classify");
			var ccl = $("#spec");
			document.getElementById("classify").options.length=0;
            $.ajax({
				type: "POST",
				data:{"custid":ccid},
				url: "JqueryAction/getProducts.action",
				dataType: "json",
				async:false,
				cache:false, 
				success: function(datas)
				{
					if(null == datas)
					{
						document.getElementById("classify").options.length=0;
						document.getElementById("spec").options.length=0;
						
						ddl.append("<option value=''>全部</option>");
						ccl.append("<option value=''>全部</option>");
					}
					else
					{
						document.getElementById("classify").options.length=1;
						
						for(var i=0;i<datas.length;i++)
						{
							ddl.append("<option value="+datas[i].id+">"+datas[i].typeName+"</option>");
						}
					}
				}
			});
		}
		
		function getProductSpec()
		{
			var ccl = $("#spec");
			var pvalue = $("#classify")[0].value;
			
			$.ajax({
				type: "POST",
				data:{"proid":pvalue},
				url: "JqueryAction/getProductSpec.action",
				dataType: "json",
				success: function(datas)
				{
					if(null == datas)
					{
						document.getElementById("spec").options.length=0;
						ccl.append("<option value=''>全部</option>");
					}
					else
					{
						document.getElementById("spec").options.length=1;
					
						for(var i=0;i<datas.length;i++)
						{
							ccl.append("<option value="+datas[i].id+">"+datas[i].specName+"</option>");
						}
					}
					
				}
			});
		}
			function getUserInit()
			{
				var customer = $("#customer")[0].value;
				var setuptype = $("#setuptype")[0].value;
				var setupstate = $("#setupstate")[0].value;
				var classify = $("#classify")[0].value;
				var spec = $("#spec")[0].value;
				var popName = $("#username").val();
				var popPhone = $("#userphone").val();
				var begintime = $("#begintime").val();
				var endtime = $("#endtime").val();
				
				$("#usertable").jqGrid({
				   	url:'CardAction/getServiceCards.action',
				   	postData:{popName:popName,popPhone:popPhone,
								customer:customer,setuptype:setuptype,
								setupstate:setupstate,classify:classify,
								spec:spec,begintime:begintime,endtime:endtime},
					datatype: "json",
					mtype:'post',
					loadComplete: function() {  
				        var grid = $("#usertable");  
				        var ids = grid.getDataIDs();  
				        for (var i = 0; i < ids.length; i++) {  
				            grid.setRowData ( ids[i], false, {height: 30});  
				        }  
				    },  
				   	colNames:['客户姓名', '商品分类', '商品型号','备注','服务卡查看','安装状态','操作'],
				   	colModel:[
				   		{name:'popName',index:'popName', width:90, align:"center"},
				   		{name:'productTypeName', index:'productTypeName', width:70, align:"center"},
				   		{name:'productSpecName',index:'productSpecName', width:70, align:"center"},
				   		{name:'remark', index:'remark', align:"center", sortable:true, width:150, formatter:kongFormatter},
				   		{name:'dsource_alarm',index:'dsource_alarm', align:"center", sortable:false, width:50, title:false, formatter:buttonFormatter},
				   		{name:'setupStateName', index:'setupStateName', align:"center", sortable:true, width:50, title:false, formatter:stateFormatter},
				   		{name:'setupState',index:'setupState', align: "center", title:false,
				   		sortable: false, editable: false, formatter:actFormatter}
				   	],
				   	rowNum:10,
				   	rownumbers: true,
	   				rownumWidth: 35,
				   	height:301,
				   	width:1074,
				   	rowList:[10,25,50],
				   	pager: '#pager1',
				   	sortname: 'id',
				   	scrollOffset:2,
				   	loadonce: true,
				   	//caption: "服务卡单列表",
				    viewrecords: true,
				    sortorder: "desc"
				});
	            jQuery("#usertable").jqGrid('navGrid', "#pager1", {edit:false, add:false,del:false,search:false,refresh:false});
	            
			}
			
			function changeicon()
			{
				if(!$("#icon1").is(":hidden"))
				{
					$("#icon2").show(); 
					$("#icon1").hide();
				}
				else
				{
					$("#icon2").hide(); 
					$("#icon1").show();
				}
			}
			
			function kongFormatter(value){
				var aa = '--';
				if(null == value || '' == value)
				{
					return aa;
				}
				else
				{
					return value;
				}
		    }
		    
		    function buttonFormatter(cellvalue, options, rawObject)
		    {
		    	var haveactive = '<a href="javascript:void(0);" style="color:blue" onclick="sawCard('+options.rowId+')">点击查看</a>';
		    	
		    	return haveactive;
		    }
		    
		    function sawCard(cardid)
		    {
		    	layer.open({
				    type: 2,
				    title: false,
				    shadeClose: true,
				    shade: 0.4,
				    closeBtn: 3,
				    anim:5,
				    area: ['1035px', '90%'],
				    offset:['15px', '35px'],
				    fadeIn : [800 , true],
				    loading : {type : 1},
				    content: ['view/ServiceCard/jomooSoloCardView.jsp?cardid='+cardid,'no']
				}); 
		    }
		    
		    function stateFormatter(cellvalue, options, rawObject)
	    	{
		    	if(cellvalue == '成功安装')
		    	{
		    		var istate = '<span class="label label-success radius">成功安装</span>';
		    	}
		    	else if(cellvalue == '未成功安装')
		    	{
		    		var istate = '<span class="label label-danger radius">未成功安装</span>';
		    	}
		    	else if(cellvalue == '未进行安装')
		    	{
		    		var istate = '<span class="label label-primary radius">未进行安装</span>';
		    	}
		    	else if(cellvalue == '延迟安装')
		    	{
		    		var istate = '<span class="label label-warning radius">延迟安装</span>';
		    	}
		    	
		    	return istate;
	    	}
		    
		    // 自定义操作列
			function actFormatter(cellvalue, options, rawObject) 
		    {
		    	//只有成功安装显示，无删除，无其他
			    var success = '<font color="#009933"><i class="Hui-iconfont" style="font-size:17px;">&#xe697;</i>已成功结单</font>';
			    
			    // 显示删除,变更为成功结单按钮
	    		var delcard = '<button style="height:24px;" type="button" class="btn btn-danger btn-xs" onclick="delServiceCard('+options.rowId+')">删 &nbsp;除</button>';
				
				var changesuccess = '<button style="height:24px;" type="button" class="btn btn-warning btn-xs" onclick="changeStauts('+options.rowId+',1);">变更为成功结单</button>';
				
				// 可显示1。成功安装2.未成功安装 3.删除 按钮
	    		// 显示删除,变更为成功结单按钮
				var setup = '<button style="height:24px;" type="button" class="btn btn-success btn-xs" onclick="changeStauts('+options.rowId+',2);">成功安装</button>';
				
				var unsetup = '<button style="height:24px;" type="button" class="btn btn-primary btn-xs" onclick="changeStauts3('+options.rowId+','+rawObject.setupTime+');">未成功安装</button>';
				
		    	if(cellvalue == 1)
		    	{
					return success;
		    	}
		    	else if(cellvalue == 0)
		    	{
					return changesuccess + "&nbsp;" + delcard;
		    	}
		    	else if(cellvalue == 3)
		    	{
					return changesuccess + "&nbsp;" + delcard;
		    	}
		    	else if(cellvalue == 2)
		    	{
					return setup + "&nbsp;" + unsetup + "&nbsp;" + delcard;
		    	}
			}
		    
		    function delServiceCard(cardId)
		    {
		    	layer.confirm('您确定作废这张服务卡吗？', {
				  btn: ['确定作废','取消操作'],skin: 'layui-layer-lan'
				}, function(){
					$.ajax({
					type: "POST",
					url: "CardAction/delServiceCard.action",
					dataType: "json",
					data:{"cardid":cardId},
					success: function(res)
					{
						if(res.delflag)
						{
							layer.msg('服务卡作废成功！', {icon: 1});
							
							$("#usertable").jqGrid('setGridParam', {
								datatype:'json',
								page : 1
							}).trigger("reloadGrid");
						}
						else
						{
							layer.msg('服务卡作废失败，请联系作者！', {icon: 2});
						}
					}
				});
				}, function(){
				  layer.msg('已取消操作', {icon: 2});
				});
		    }
		    
		    function changeStauts(cardId, flag)
		    {
		    	layer.confirm('确定变更为成功安装状态？', {
				  btn: ['确定','取消'],skin: 'layui-layer-lan'
				}, function(){
					$.ajax({
					type: "POST",
					url: "CardAction/updateServiceCardState.action",
					dataType: "json",
					data:{"cardid":cardId,"flag":flag,"remark":"","lazytime":null,"revalue":null},
					success: function(res)
					{
						if(res.delflag)
						{
							layer.msg('服务卡状态已变更为成功安装', {icon: 1});
							
							$("#usertable").jqGrid('setGridParam', {
								datatype:'json',
								page : 1
							}).trigger("reloadGrid");
						}
						else
						{
							layer.msg('服务卡状态变更失败，请联系作者！', {icon: 2});
						}
					}
				});
				}, function(){
				  layer.msg('已取消操作', {icon: 2});
				});
		    }
		    
		    function changeStauts3(cardId, stuptime)
		    {
		    	layer.open({
				    type: 2,
				    title: false,
				    shadeClose: false,
				    shade: 0.1,
				    closeBtn: 2,
				    area: ['450px', '63%'],
				    fadeIn : [600 , true],
				    loading : {type : 0},
				    content: 'view/ServiceCard/changeCardStateView.jsp?cardid='+cardId+'&setuptime='+stuptime
				}); 
		    }
		    
			// 查询（重载）
			function tijiao(){
				var customer = $("#customer")[0].value;
				var setuptype = $("#setuptype")[0].value;
				var setupstate = $("#setupstate")[0].value;
				var classify = $("#classify")[0].value;
				var spec = $("#spec")[0].value;
				var popName = $("#username").val();
				var popPhone = $("#userphone").val();
				var begintime = $("#begintime").val();
				var endtime = $("#endtime").val();
				$("#usertable").jqGrid('setGridParam', {
					datatype:'json',
				   	postData:{popName:popName,popPhone:popPhone,
								customer:customer,setuptype:setuptype,
								setupstate:setupstate,classify:classify,
								spec:spec,begintime:begintime,endtime:endtime},
					loadComplete: function() {  
				        var grid = $("#usertable");  
				        var ids = grid.getDataIDs();  
				        for (var i = 0; i < ids.length; i++) {  
				            grid.setRowData ( ids[i], false, {height: 30});  
				        }  
				    }, 
					page : 1
				}).trigger("reloadGrid");
			}
			
			function excleto(){
				var customer = $("#customer")[0].value;
				var setuptype = $("#setuptype")[0].value;
				var setupstate = $("#setupstate")[0].value;
				var classify = $("#classify")[0].value;
				var spec = $("#spec")[0].value;
				var popName = $("#username").val();
				var popPhone = $("#userphone").val();
				var begintime = $("#begintime").val();
				var endtime = $("#endtime").val();
				location.href = "CardAction/getServiceCardExcle.action?popName="+popName+"&popPhone="+popPhone+
				                "&customer="+customer+"&setuptype="+setuptype+"&setupstate="+setupstate+
				                "&classify="+classify+"&spec="+spec+"&begintime="+begintime+"&endtime="+endtime;
			}
		    
		    function test(val)
			{
				if('unlockOk' == val)
				{
					layer.msg('安装状态已变更为未成功安装', {icon: 1});
					$("#usertable").jqGrid('setGridParam', {
						datatype:'json',
						page : 1
					}).trigger("reloadGrid");
				}
			}
	</script>
	<body>
		<div class="panel-body2" style="padding-bottom:0px;text-align: right;width: 1113px;margin-left: -4px;">
		<div class="panel panel-primary" style="margin-top: 5px">
		<div class="panel-heading" style="text-align: left;">查找条件
		<a style="line-height: 1.6em;float: right;text-decoration:none;" 
					data-toggle="collapse" data-parent="#accordion" 
				   href="#collapseOne" title="收起" onclick="changeicon();">
				   <i id="icon1" class="Hui-iconfont" style="color:white;display: block;">&#xe6d6;</i>
				   <i id="icon2" class="Hui-iconfont" style="color: white;display: none;">&#xe6d5;</i>
				</a></div>
		
		<div id="collapseOne" class="panel-collapse collapse in">
		<div class="panel-body3">
			<div class="text-l">
			<p>
				<span style="padding-left: 15px">
					<font style="font-size: 12px;text-align: left;color: gray;"><b>客户姓名：</b></font>
					<input type="text" name="username" id="username" placeholder="输入关键字查询"
							 class="input-text inline radius" style="width: 120px">
				</span>
				<span style="padding-left: 15px">
					<font style="font-size: 12px;text-align: left;color: gray;"><b>客户电话：</b></font>
					<input type="text" name="userphone" id="userphone" placeholder="输入关键字查询"
							 class="input-text inline radius" style="width: 120px">
				</span>
				<span style="padding-left: 15px">
					<font style="font-size: 12px;text-align: left;color: gray;"><b>产品厂商：</b></font>
				</span>
				<span class="select-box inline radius" > 
					<select id="customer" name="customer" class="select" style="width: 100px" onclick="getProducts();">
						<option value="" selected="selected">全部</option>
					</select> 
				</span>
				<span style="padding-left: 15px">
					<font style="font-size: 12px;text-align: left;color: gray;"><b>安装类型：</b></font>
				</span>
				<span class="select-box inline radius" > 
					<select id="setuptype" name="setuptype" class="select" style="width: 120px">
					</select> 
				</span> 
				<span style="padding-left: 15px">
					<font style="font-size: 12px;text-align: left;color: gray;"><b>安装状态：</b></font>
				</span>
				<span class="select-box inline radius" > 
					<select id="setupstate" name="setupstate" class="select" style="width: 120px">
					</select> 
				</span> 
				</p>
				<p>
				<span style="padding-left: 15px">
					<font style="font-size: 12px;text-align: left;color: gray;"><b>产品分类：</b></font>
				</span>
				<span class="select-box inline radius" > 
					<select id="classify" name="classify" class="select" style="width: 108px" onchange="getProductSpec();">
					</select> 
				</span> 
				<span style="padding-left: 15px">
					<font style="font-size: 12px;text-align: left;color: gray;"><b>产品规格：</b></font>
				</span>
				<span class="select-box inline radius" > 
					<select id="spec" name="spec" class="select" style="width: 108px">
						<option value="" selected="selected">全部</option>
					</select> 
				</span> 
				<span style="padding-left: 15px">
					<font style="font-size: 12px;text-align: left;color: gray;"><b>安装时间：</b></font>
				</span>
				<span class="select-box inline radius" style="width: 131px;"> 
					<input size="16" style="width: 120px;height: 25px;" type="text" value="<%=oneday %>" readonly class="form_datetime form-control" id="begintime" name="begintime"/>
				</span>
				&nbsp;&nbsp;至&nbsp;&nbsp;
				<span class="select-box inline radius" style="width: 131px;"> 
					<input size="16" style="width: 120px;height: 25px;" type="text" value="<%=today %>" readonly class="form_datetime form-control" id="endtime" name="endtime"/>
				</span>
				<span style="padding-left: 26px">
					<a href="javascript:;" id="queryUser" style="line-height: 1.7em;height: 33px"
					class="btn btn-success radius" onclick="tijiao();"><i class="Hui-iconfont">&#xe665;</i>
					点我查询&nbsp;</a>&nbsp;&nbsp;
					<a href="javascript:;" onclick="excleto();"  style="line-height: 1.7em;height: 33px"
					class="btn btn-primary radius"><i class="Hui-iconfont">&#xe644;</i> 导出报表</a>
				</span>
				</p>
			</div>
			</div>
			</div>
			</div>
			</div>
			<div style="margin-left:15px;margin-top: -10px;">
				<table id="usertable"></table>
				<div id="pager1"></div>
			</div>
	</body>
</html>